<template>
    <div>
        <!--        搜索表单-->
        <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
            <el-form-item >
                <el-input v-model="SearchForm.username" placeholder="申请人"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="SearchForm.sname" placeholder="店铺名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="SearchForm.beginTime"
                        type="date"
                        placeholder="选择创建日期">
                </el-date-picker>
                ——
                <el-date-picker
                        v-model="SearchForm.endTime"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initTable()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--        表格回显-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="记录编号">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="申请人">
            </el-table-column>
            <el-table-column
                    prop="applicationdate"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="店铺名">
            </el-table-column>
            <el-table-column
                    prop="uname"
                    label="审核人">
            </el-table-column>
            <el-table-column
                    prop="audttime"
                    label="审核时间">
            </el-table-column>
            <el-table-column
                    prop="audtresult"
                    label="审核结果">
                <template slot-scope="scope">
                    <el-button :type="scope.row.audtresult==0?'success':'warning'" plain>{{scope.row.audtresult==0?"通过":"驳回" }}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="reasonrejection"
                    label="驳回理由">
            </el-table-column>
        </el-table>
        <!--        分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync=this.SearchForm.currentPage
                :page-sizes="pageSizes"
                :page-size=this.SearchForm.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "businessRecord",
        data(){
            return{
                tableData:[],
                SearchForm:{
                    //当前页码
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    username:"",
                    sname:"",
                    beginTime:"",
                    endTime:""
                },
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
            }
        },
        created() {
            this.initTable()
        },
        methods:{
            initTable(){
                this.$http.post("/system/audtmsg/findAllAuditMsg",this.SearchForm).then(result=>{
                    this.tableData = result.data.data.records
                    this.total = result.data.data.total;
                })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },
        }
    }
</script>

<style scoped>

</style>